<template>
    <div class="list">
         <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="getList"
        >
            <ul class="noticeList">
                <router-link v-for="(item, index) in noticeList" :key="item.noticeId" :to="`/notice/detail/${item.noticeId}`">
                    <li class="item" :class="{'vux-1px-b': index !== noticeList.length - 1}">
                        <p class="name van-ellipsis">{{item.title}}</p>
                        <p class="time">{{item.createTime}}</p>
                        <p class="tips">{{item.briefIntroduction}}</p>
                    </li>
                </router-link>
            </ul>
            <!-- <van-cell  :title="item.title" :value="item.createTime" :label="item.briefIntroduction"></van-cell> -->
        </van-list>
    </div>
</template>

<script>
export default {
    name: 'noticeList',
    data() {
        return {
            pageNum: 0,
            total: -1,
            loading: false, //是否正在加载
            finished: false, //是否加载完了
            noticeList: []
        }
    },
    methods: {
        getList() {
            if (this.total !== -1 && this.pageNum >= this.total) {
                this.finished = true;
                return;
            }
            this.pageNum++;
            this.loading = true;
            this.$http.post('/msg/notice/front/getUserNoticeList', {userType: 1, pageSize:100, pageNum: this.pageNum}).then(res => {
                this.loading = false;
                if (res.status === 0) {
                    let data = res.data.rows || [];
                    this.total = res.data.total;
                    if (this.pageNum == this.total || (this.pageNum == 1 && data.length == 0)) {
                        this.finished = true;
                    }
                    this.noticeList = this.noticeList.concat(data);
                } else {
                    // 请求失败
                    this.finished = true;
                    return;
                }
            })
        }
    }
}
</script>

<style scoped lang="scss">
.noticeList {
    min-height: 100%;
    padding-left: 15px;
    background-color: #fff;
    .item {
        color: #333;
        font-size: 14px;
        padding: 10px 10px 10px 5px;
        .name {
            font-size: 16px;
            line-height: 24px;
        }

        .time {
            color: #999;
            font-size: 12px;
            line-height: 22px;
        }
        .tips {
            white-space: pre-wrap;
            border: 0px solid black;
            position: relative;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -ms-flex-direction: column;
            flex-direction: column;
            -ms-flex-line-pack: start;
            align-content: flex-start;
            -ms-flex-negative: 0;
            flex-shrink: 0;
            font-size: 14px;
            text-align: left;
            line-height: 20px;
            height: 36px;
            margin-top: 2px;
            margin-bottom: 2px;
            color: #3e3e3e;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }
    }
}
</style>
